<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>批量打印二维码</title>
    <link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap.min.css">
    <link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="${contextPath}/static/layer/css/layui.css">
    <link href="${contextPath}/static/ztree/css/zTreeStyle.css" rel="stylesheet"/>
    <script src="${contextPath}/static/statistics/js/jquery.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap.min.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.min.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.fr.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap.min.js"></script>
    <script src="${contextPath}/static/statistics/js/vue.js"></script>
    <script src="${contextPath}/static/statistics/js/echarts.min.js"></script>
    <script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.mockjax.js"></script>
    <script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.autocomplete.js"></script>
    <script type="text/javascript" src="${contextPath}/static/ztree/js/jquery.ztree.core-3.5.js"></script>
    <script type="text/javascript" src="${contextPath}/static/ztree/js/jquery.ztree.excheck-3.5.js"></script>
    <script type="text/javascript" src="${contextPath}/static/util/my-autocomplete.js"></script>
    <style>
        body{
            background-color: inherit;
        }
        .autocomplete-suggestions {
            border: 1px solid #999;
            background: #FFF;
            overflow: auto;
        }

        .autocomplete-suggestion {
            padding: 2px 5px;
            white-space: nowrap;
            overflow: hidden;
        }

        .autocomplete-selected {
            background: #F0F0F0;
        }

        .autocomplete-suggestions strong {
            font-weight: normal;
            color: #3399FF;
        }

        body {

            background-color: #f5f5f5;

        }

        .dvQC {
            float: left;
            margin-top: 26px;
            margin-left: 10px;
        }

        .pName {
            font-size: 12px;
            width: 100px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        p {
            text-align: center;
            margin-top: 0px;
            font-size: 14px;
            margin-left: 35px;
        }

        #top {
            width: 740px;
            margin: 0 auto;
        }

        .logoC {
            position: relative;
            top: -48px;
            left: 68px;
            z-index:9999999;
            width: 35px;
            height: 35px;
        }
    </style>
</head>
<body>
<div class="container-fluid" id="app">
    <form class="form-inline" style="margin-top: 20px; margin-bottom: 5px;" id="selectForm">
        <shiro:hasPermission name="CLOUDERPORDERSPLADMINORDER:STATISTICS">
            <div class="form-group">
                <input id="cityNameInput" class="form-control input-sm" type="text" placeholder="市局名称">
            </div>
            <div class="form-group">
                <input id="quXianNameInput" class="form-control input-sm" type="text"
                       placeholder="区县名称">
            </div>
        </shiro:hasPermission>
        <shiro:lacksPermission name="CLOUDERPORDERSPLEMPORDER:STATISTICS">
            <shiro:lacksPermission name="CLOUDERPORDERSPLCHANNELORDER:STATISTICS">
                <div class="form-group">
                    <input id="channelNameInput" class="form-control input-sm" type="text"
                           placeholder="渠道名称">
                </div>
            </shiro:lacksPermission>
            <div class="form-group">
                <input id="empNameInput" class="form-control input-sm" type="text"
                       placeholder="客户经理名称">
            </div>
        </shiro:lacksPermission>
        <div class="form-group">
            <input id="custNameInput" class="form-control input-sm"  type="text"
                   placeholder="客户名称">
        </div>

        <div class="form-group">
            <input id="custCodeInput" class="form-control input-sm" v-model="queryModel.stringMap.custCode1" type="text"
                   placeholder="专卖证号(多个用,隔开)">
        </div>

        <button type="button" class="btn btn-sm btn-success" @click="getOrder()">生成二维码</button>
        <button type="button" class="btn btn-sm btn-info" @click="printQrCode()">打印二维码</button>
    </form>

    <div id="top">

    </div>
</div>
</body>
<script src=${contextPath}/static/layer/layui.all.js></script>
<script src="${contextPath}/static/supermarket/jquery.qrcode.min.js"></script>
<script type="text/javascript">
    var laypage = layui.laypage
        , layer = layui.layer;

    var app = new Vue({
        el: '#app',
        data: {
            queryModel: {
                stringMap: {
                    cityName: '',
                    quXianName: '',
                    channelName: '',
                    empName: '',
                    custName: '',
                    custCode1: '',
                    custCode2: '',
                },

            },
        },
        watch : {
          'queryModel.stringMap.custCode1' : function (newValue) {
              if (newValue.length >12) {
                  var cs = newValue.split(',');

                  var re = "";
                  for (var inde in cs) {
                      var cc = cs[inde];
                      if (cc) {
                          re = re + "'"  + cc +  "',";
                      }
                  }
                  this.queryModel.stringMap.custCode2 = re.substring(0,re.length-1)
              }else {
                  this.queryModel.stringMap.custCode2 =   "'" + newValue + "'";
              }

          }
        },
        methods: {
            getOrder: function () {
                $("#top").empty();
                layer.load(1)
                this.disposeQP();
                $.ajax({
                    url: '${contextPath}/shop/getQrCodeGenerate',
                    type: 'post',
                    data: app.queryModel,
                    success: function (data) {
                        layer.closeAll('loading')
                        if (data.success == false) {
                            layer.msg("获取出错：" + data.message)
                            return
                        }
                        //console.log(data)
                        var dataArray = data.data;
                        if (!dataArray.length) {
                            layer.msg("查询没有数据")
                            return
                        }
                        app.managerList(dataArray)

                    },
                    error: function (error) {
                        layer.closeAll('loading');
                        layer.msg('网络错误');
                        //console.log(error)
                    }
                })
            },
            disposeQP: function () {
                var cityName = $("#cityNameInput").val();
                var quXianName = $("#quXianNameInput").val();
                var channelName = $("#channelNameInput").val();
                var empName = $("#empNameInput").val();
                var custName = $("#custNameInput").val();

                this.queryModel.stringMap.cityName = cityName;
                this.queryModel.stringMap.quXianName = quXianName;
                this.queryModel.stringMap.channelName = channelName;
                this.queryModel.stringMap.empName = empName;
                this.queryModel.stringMap.custName = custName;
            },
            generQrCode: function (co, text) {
                $(co).qrcode({
                    render: "canvas", //table方式
                    width: 100, //宽度
                    height: 100, //高度
                    text: text //任意内容
                });
            },
            managerList: function (list) {
                var len = list.length;
                for (var i = 0; i < len; i++) {
                    //创建一个div
                    var div = document.createElement("div");
                    //为div创建属性class = ""
                    var divattr = document.createAttribute("id");
                    var divattrClass = document.createAttribute("class");
                    divattrClass.value = "dvQC";
                    divattr.value = list[i].CODE;
                    //把属性class = ID值添加到div
                    div.setAttributeNode(divattr);
                    div.setAttributeNode(divattrClass);

                    //创建logo
                    var logo = document.createElement("img");
                    logo.setAttribute("class", "logoC");
                    logo.setAttribute("src","${contextPath}/static/image/name_zgyc.png");
                    div.appendChild(logo);

                    var p = document.createElement("p");
                    p.innerHTML = list[i].CODE;

                    document.getElementById("top").appendChild(div);
                    app.generQrCode("#" + list[i].CODE, list[i].CODE);
                    div.appendChild(p);

                    var p1 = document.createElement("p");
                    var pClass = document.createAttribute("class");
                    pClass.value = "pName";
                    p1.setAttributeNode(pClass)
                    div.appendChild(p1);

                    p1.innerHTML = list[i].NAME;
                }
            },
            printQrCode: function () {
                $("#selectForm").addClass('hide');
                window.print();
                $("#selectForm").removeClass('hide');
                // $("#top").print(/*options*/);
            }
        }
    });


    var cityNode = null, quXianNode = null, channelNode = null, empNode = null, custNode = null, shopNode = null;

    <shiro:lacksPermission name="CLOUDERPORDERSPLEMPORDER:STATISTICS">
    empNode = '#empNameInput';
    channelNode = '#channelNameInput';
    <shiro:hasPermission name="CLOUDERPORDERSPLADMINORDER:STATISTICS">
    cityNode = '#cityNameInput';
    quXianNode = '#quXianNameInput';
    </shiro:hasPermission>
    </shiro:lacksPermission>
    custNode = '#custNameInput';

    organization_tree('${contextPath}', cityNode, quXianNode, channelNode, empNode, custNode, shopNode);
</script>
</html>





